<template>
  <div>
    <el-form>
      <el-alert
        :title="`共${total}条记录`"
        type="info"
        show-icon
        :closable="false"
        style="margin:20px 0"
      />
      <el-table
        :data="choiceData"
        stripe
        style="width: 100%"
      >

        <el-table-column
          prop="number"
          label="试题编号"
          width="180"
        />
        <el-table-column
          prop="subject"
          label="学科"
          width="100"
        />
        <el-table-column
          prop="catalog"
          label="目录"
        />
        <el-table-column prop="questionType" label="题型">
          <template #default="{row}">
            {{ isQuestionType(row.questionType) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="question"
          label="题干"
        >
          <template v-slot="{ row }">
            <span v-html="row.question" />
          </template></el-table-column>

        <el-table-column
          prop="addDate"
          label="录入时间"
        />
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">
            {{ isDifficulty(row.difficulty) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="creator"
          label="录入人"
        />
        <el-table-column prop="chkState" label="审核状态">
          <template #default="{row}">
            {{ isChkState(row.chkState) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="chkUser"
          label="审核人"
        />
        <el-table-column prop="publishState" label="发布状态">
          <template #default="{row}">
            {{ isPublish(row.publishState) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="300">
          <template #default="{row}">
            <el-button type="text" @click="handlePreview(row)">预览</el-button>
            <el-button type="text" @click="handleExamine(row)">审核</el-button>
            <el-button type="text" @click="handleEdit(row.id)">修改</el-button>
            <el-button v-if="row.publishState===0" type="text" @click="handleArrive(row)">上架</el-button>
            <el-button v-else type="text">下架</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { getChoiceListAPI, delChoiceAPI, arriveChoiceAPI } from '@/api/practice'
export default {
  name: 'Choice',
  data() {
    return {
      choiceData: [],
      total: ''
    }
  },
  created() {
    this.getChoiceList()
  },
  methods: {
    // 上下架
    async handleArrive(row) {
      await arriveChoiceAPI(row.id, row.publishState)
    },
    // 提醒判断
    isQuestionType(val) {
      if (+val === 1) { return '单选' } else if (+val === 2) { return '多选' } else { return '简答' }
    },
    // 判断题型难度
    isDifficulty(row) {
      if (+row === 1) { return '简单' } else if (+row === 2) { return '一般' } else { return '困难' }
    },
    // 判断发布状态
    isPublish(val) {
      if (+val === 0) { return '下架' } else { return '上架' }
    },
    // 判断审核状态
    isChkState(row) {
      if (+row === 0) { return '待审核' } else if (+row === 1) { return '通过' } else { return '拒绝' }
    },
    // 精选列表
    async getChoiceList() {
      const resp = await getChoiceListAPI()
      this.choiceData = resp.items
      this.total = resp.counts
    },
    handlePreview() {},
    handleExamine() {},
    handleEdit() {},
    // 删除
    async handleDelete(row) {
      await delChoiceAPI(row.id)
      this.getChoiceList()
      this.$message.success('删除成功')
    }

  }
}
</script>

<style>

</style>
